<script setup>
import { ElMessage } from "element-plus";
import axios from "../../utils/http.js";
import { reactive, ref, onMounted } from "vue";
import formatTime from "../../utils/formattime.js";
import { useRouter } from "vue-router";
let router = useRouter();
let tableData = ref([]);
let stu_list = ref([]);
let dialogTableVisible = ref(false);
const dialogs = ref(false);
let tableDatas = ref([]);
let class_name = ref("");
const loading = ref(true)
const loadingTable1=ref(true)
const loadingTable2=ref(true)
const handleSee = (row) => {
    dialogs.value = true;
    class_name.value = row.classes_name;
    axios({
        url: "zhineng/break/"+class_name.value+"/",
        method: "GET",
    }).then((res) => {
        tableDatas.value = res.data.data;
        loadingTable1.value=false;
        for (var i = 0; i < tableDatas.value.length; i++) {
            tableDatas.value[i].be_time = formatTime(tableDatas.value[i].be_time)
        }
        ElMessage.success("获取班级违纪信息成功");
    });
};
function get_class_list() {
    axios({
        url: "cteacher/get_class_info",
        method: "GET",
        params: {
            username: localStorage.getItem("username"),
        },
    }).then((res) => {
        tableData.value = res.data.class;
        loading.value=false;
        ElMessage.success("获取班级信息成功");
    });
}
onMounted(() => {
    get_class_list();
});
function handleEdit(row) {
    dialogTableVisible.value = true;
    class_name.value = row.classes_name;
    axios({
        url: "cteacher/get_class_info/",
        method: "POST",
        params: {
            username: localStorage.getItem("username"),
        },
        data: {
            id: row.id,
        },
    }).then((res) => {
        stu_list.value = res.data.data;
        loadingTable2.value=false;
        ElMessage.success("获取班级学生信息成功");
    });
}

</script>
<template>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="班级id" width="180" />
        <el-table-column prop="classes_name" label="班级名称" width="180" />
        <el-table-column prop="colleges_id" label="所在学院" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" type="success" @click="handleEdit(scope.row)">
                    查看班级学生
                </el-button>
                <el-button size="small" type="primary" @click="handleSee(scope.row)">查看班级学生违纪信息</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogTableVisible" :title="`${class_name}所有学生信息`" width="1200">
        <el-table v-loading="loadingTable2" :data="stu_list">
            <el-table-column property="username" label="用户名" width="150" />
            <el-table-column property="phone" label="手机号" width="200" />
            <el-table-column property="number" label="身份证号" width="200" />
            <el-table-column property="age" label="年龄" width="200" />
            <el-table-column property="address" label="地址" width="200" />
            <el-table-column property="parents" label="父母" width="200" />
        </el-table>
    </el-dialog>
    <el-dialog v-model="dialogs" :title="`${class_name}所有学生违纪信息`" width="1200">
        <el-table  v-loading="loadingTable1" :data="tableDatas" style="width: 100%">
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="break_user" label="违规人" width="180"></el-table-column>
            <el-table-column prop="point" label="扣除分数" width="180"></el-table-column>
            <el-table-column prop="type" label="违规类型" width="180">
                <template #default="scope">
                    <el-text :type="scope.row.type ? 'primary' : 'danger'">{{ scope.row.type ? '加分' : '减分' }}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="违规原因" width="180" />
            <el-table-column prop="be_time" label="违规时间" width="180" />
            <el-table-column prop="be_place" label="违规地点" width="180" />
        </el-table>
    </el-dialog>
</template>
<style scoped></style>
